<template>
	<view class="layout">
		
		<view class="select">
			<!-- <scroll-view scroll-x show-scrollbar="false">
				
				 <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="button"   activeColor="#1ec0ff" class='right'></uni-segmented-control>
			</scroll-view> -->
			<scroll-view scroll-x show-scrollbar="false" :scroll-left="scrollLeft">
				<view class="list">
					<view class="titles" v-for="(item,index) in items" :key="index" @click="onClickItem(index)">
						
						<view class="shang">
							{{item}}
						</view>
						<view class="xia" :class="{active : current == index}">
							
						</view>
					</view>
					
				</view>
				
			</scroll-view>
		</view>
		<view class="content">
		            <view v-show="current === 0">
		                <students-base-info></students-base-info>
		            </view>
		            <view v-show="current === 1">
		               <learning></learning>
		            </view>
		            <view v-show="current === 2">
		                <students-contact></students-contact>
		            </view>
					<view v-show="current === 3">
					    <students-status></students-status>
					</view>
					<view v-show="current === 4">
					   <students-status-two></students-status-two>
					</view>
					<view v-show="current === 5">
					    <students-reward></students-reward>
					</view>
					<view v-show="current === 6">
					    <students-reg-info></students-reg-info>
					</view>
					<view v-show="current === 7">
						<students-score></students-score>
					</view>
					<view v-show="current === 8">
						<students-score-two></students-score-two>
					</view>
					<view v-show="current === 9">
					    <students-pay></students-pay>
					</view>
				
		</view>
		
			
		
	</view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad } from "@dcloudio/uni-app";

const scrollLeft = ref(0);
const current = ref(0);
const items = ref(['基本信息','学业/其他','联系/简历','学籍信息1','学籍信息2','奖惩信息','注册信息','成绩1','成绩2','缴费信息']);	

onLoad(async(e)=>{
	
	if(e.current){
		current.value = Number(e.current);
		scrollLeft.value = current.value * 60 ;
	}
	

	
	
})

const onClickItem = (index) =>{
		
		if (current.value != index) {
		        current.value = index;
		    }
		scrollLeft.value = index * 60;
		
}



</script>

<style lang='scss' scoped>
	.layout{
		padding:20rpx 30rpx;
		.select{
			scroll-view{
				uni-view{
					/* width: 2000rpx; */
				}
				white-space: nowrap;
				
			}
			
			.list{
				display: flex;
				height: 90rpx;
				.titles{
					
					width: 200rpx;
					height: 100%;
					margin-right:30rpx;
					font-weight: 600;
					.shang{
						line-height: 70rpx;
					}
					.xia{
						
					}
					.active{
						width: 100%;
						height: 5rpx;
						
						background: $xx-color-body;
					}
				}
				
			}
		}
	}       
</style>
